import ContentCopyIcon from '@mui/icons-material/ContentCopy';
import { Box, Button, ButtonGroup, Tooltip } from '@mui/material';
import { memo } from 'react';

/**
 * JSON操作按钮组件
 */
const ActionButtons = memo(({ 
    formatJson, 
    zipJson, 
    escapeJson, 
    unescapeJson, 
    handleCopyResult, 
    hasResult 
}: { 
    formatJson: () => void; 
    zipJson: () => void; 
    escapeJson: () => void; 
    unescapeJson: () => void; 
    handleCopyResult: () => void; 
    hasResult: boolean; 
}) => (
    <Box sx={{
        display: 'flex',
        flexDirection: { xs: 'column', sm: 'row' },
        gap: 2,
        mb: 2,
        alignItems: { xs: 'stretch', sm: 'center' }
    }}>
        <ButtonGroup
            variant="contained"
            aria-label="JSON操作按钮组"
            sx={{
                flexWrap: { xs: 'wrap', md: 'nowrap' },
                '& .MuiButton-root': {
                    flex: { xs: '1 0 auto', md: '0 1 auto' }
                }
            }}
        >
            <Tooltip title="格式化JSON，使其易于阅读">
                <Button onClick={formatJson}>格式化</Button>
            </Tooltip>
            <Tooltip title="压缩JSON，移除所有空格">
                <Button onClick={zipJson}>压缩</Button>
            </Tooltip>
            <Tooltip title="转义JSON字符串">
                <Button onClick={escapeJson}>转义</Button>
            </Tooltip>
            <Tooltip title="去除JSON字符串中的转义">
                <Button onClick={unescapeJson}>去转义</Button>
            </Tooltip>
        </ButtonGroup>

        <Tooltip title="复制结果到剪贴板">
            <Button
                variant="outlined"
                onClick={handleCopyResult}
                startIcon={<ContentCopyIcon />}
                disabled={!hasResult}
            >
                复制结果
            </Button>
        </Tooltip>
    </Box>
));

export default ActionButtons;